<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .myclass1 {
        background: seashell;
    }

    .myclass2 {
        background: skyblue;
    }

    .myclass3 {
        background: tomato;
    }

    .myclass4 {
        background: orange;
    }

    .myclass5 {
        background: yellowgreen;
    }
</style>

<body>
    <h1 id="h1">今天还不错</h1>
    <div id="myDiv">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
    <div id="myDiv1">
        <span>啦啦啦</span>
    </div>

    <div id="myDiv2">

    </div>

    <div id="myDiv3">
        123124234534534654
    </div>
    <script>
        var arr = ["开心", "惊喜", "失落", "奋斗"]

        // 获取id名称为h1的元素  并赋值给变量 h1

        var h1 = document.getElementById("h1")

        // console.log(h1)

        // 获取id名称为 myDiv 元素下的所有span标签 并赋值给变量 spans

        var spans = document.getElementById("myDiv").getElementsByTagName("span")

        console.log(spans)


        // 将id名称为h1的元素内容改为 "最近有点热，大家注意喝水"

        h1.innerHTML = "最近有点热，大家注意喝水"


        // 获取id名称为myDiv元素下的所有span标签 将每一个span里面的内容改为对应数组里面的元素值

        // spans[0].innerHTML = arr[0]
        // spans[1].innerHTML = arr[1]
        // spans[2].innerHTML = arr[2]
        // spans[3].innerHTML = arr[3]

        for (var i = 0; i < arr.length; i++) {
            spans[i].innerHTML = arr[i]
        }


        // 获取id名称为myDiv1下的span标签 给该标签随机一个类名为   myClass1   -   myClass5

        var myDiv1Span = document.getElementById("myDiv1").getElementsByTagName("span")[0]
        console.log(myDiv1Span)
        var num = Math.floor(Math.random() * 4 + 1)


        myDiv1Span.className = "myclass" + num


        // 获取id名称为myDiv2的元素  给该元素添加ul标签同时ul标签的类名为ul
        var myDiv2 = document.getElementById("myDiv2")

        myDiv2.innerHTML = " <ul></ul>"

        var ul = myDiv2.getElementsByTagName("ul")[0]

        ul.className = "ul"




        // console.log(myDiv2)


        //   给ul加内部加入4个li标签  每个li标签的id名称 为li对应的下标

        for (var i = 0; i <= 3; i++) {
            ul.innerHTML += "<li id=" + i + "></li>"

        }


        // 封装一个函数setColor   函数有一个参数为color  将传递过来的16进制的颜色值 赋值给 id名称为mydiv3的元素的背景颜色
        function setColor(color) {
            var mydiv3 = document.getElementById("myDiv3");
            console.log(mydiv3)
            mydiv3.style.background = color
        }

        setColor("#ccc")




    </script>
</body>

</html>